<template>
    <div class="z-sidebar-wrapper">
        <van-sidebar class="z-sidebar" v-model="menuActive">
            <van-sidebar-item v-if="discount">
                <template #title>
                    <div class="z-sidebar-discount" key="150">
                        <img class="z-sidebar-discount__icon" :src="i_order_fire" />
                        <div class="z-sidebar-discount__text">优惠</div>
                    </div>
                </template>
            </van-sidebar-item>
            <van-sidebar-item 
                v-for="(v, k) in menuList" 
                :key="k" 
                :title="v.name" 
                :badge-props="{
                    content: v.badge,
                    max: '99',
                    showZero: false
                }" 
                @click="onClick(v.code, k)"
            />
        </van-sidebar>
    </div>
</template>
<script setup>
import i_order_fire from '@/assets/images/common/i_order_fire.png'

const props = defineProps({
    currentActive: {
        type: [Number, String],
        required: true,
    },
    menuList: {
        type: Array,
        required: true,
    },
    discount: {
        type: Boolean,
        default: false
    },
});

const emits = defineEmits(['click']);
const { menuList, currentActive } = toRefs(props);
const menuActive = ref(unref(currentActive));

watch(currentActive, (newValue) => {
  menuActive.value = newValue;
});

const onClick = (code, k)=>{
    emits('click', code, k);
}

</script>
<style scoped lang="scss">
.z-sidebar-wrapper {
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        overflow: -moz-scrollbars-none; /* Firefox */
        display: none; /* Chrome, Safari, and Opera */
    }

    :deep(.z-sidebar) {
        width: 80px;
        background-color: #28282E;

        .z-sidebar-discount {
            display: flex;
            align-items: center;

            &__icon {
                display: block;
                width: 12px;
            }
            &__text {
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(45deg, #FACC22 0%, #F83600 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                padding-left: 4px;
            }
        }

        .van-sidebar-item {
            background: transparent;
            padding: 0;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #999999;
            line-height: 14px;
            text-align: center;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #1D1D21;
            box-shadow: 0px 1px 0px 0px #33333B;
        }

        .van-sidebar-item--select:before {
            background: transparent;
        }

        .van-sidebar-item--select,
        .van-sidebar-item--select:active {
            // background-color: #17171A;
            // color: #FFAA00;
            // background: #17171A;
            // border-radius: 20px 0px 20px 0px;
            background-image: url('@/assets/images/common/i_siderbar_active.png');
            background-size: 100% 100%;
            color: #FFFFFF;
        }

        .van-badge {
            border: 0;
            font-size: 12px;
            line-height: 12px;
            padding: 2px 4px;
            transform: scale(0.83);
            transform-origin: top;
            top: -10px;
            right: -11px;
        }
    }
}
</style>